<template>
	<view class="content">
		<hx-navbar ref="hxnb" :config="config">
			<block slot="left">
				<view class="left" style="">
					<!--          <image src="https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/flashicon_white.png" mode=""-->
					<!--                 style="width: 200upx;height: 90upx;margin-left: 20upx;" v-if="!logo"></image>-->
					<!--          <image src="https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/flashicon_deep.png" mode=""-->
					<!--                 style="width: 200upx;height: 90upx;margin-left: 20upx;" v-if="logo"></image>-->
				</view>
			</block>
			<block slot="center">
				<view class="center" style="">
					<view style="font-size: 24upx;text-align: center;width: 220upx;font-family: iconfont;" @click="chooseCity">
						{{ location }} &#xe600;
					</view>
				</view>
			</block>
		</hx-navbar>
		<!--    <image src="https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/index.png" class="i1"></image>-->
		<view class="m1">
			<view class="m2">
				<!--        <image src="https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/qs.png"></image>-->
				<text>这里应该是 附近人员比较少等提示信息 动态显示 后端返回</text>
			</view>
			<view class="m3">
				<!-- tab选项 -->
				<zzx-tabs :items="items" :current="current" @clickItem="handleTab" ref="mytabs"></zzx-tabs>
				<!-- 帮我送 -->
				<view v-if="current==0">
					<view class="m4">
						<!--            <image src="https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/dot_1.png"></image>-->
						<view class="m7">
							<view class="m5" @click="handleAddress">{{ sendAddress }}</view>
							<view class="b1" @click="handleSend">常用</view>
						</view>
					</view>
					<view class="m6">
						<!--            <image src="https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/dot_4.png"></image>-->
						<view class="m7">
							<view class="m5" @click="handleAddressEnd">要送到哪里?</view>
							<view class="b1" @click="handleReceiving">常用</view>
						</view>
					</view>
				</view>
				<!-- 帮我取 -->
				<view v-if="current==1">
					<view class="m4">
						<!--            <image src="https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/dot_1.png"></image>-->
						<view class="m7">
							<view class="m5" @click="handleHelpTakeAddress">{{ takeAddress }}</view>
							<view class="b1" @click="handleHelpTake">常用</view>
						</view>
					</view>
					<view class="m6">
						<!--            <image src="https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/dot_4.png"></image>-->
						<view class="m7">
							<view class="m5" @click="handleHelpSendAddress">要送到哪里?</view>
							<view class="b1" @click="handleHelpSend">常用</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="t1">
			<view class="t2">
				<view class="t3" v-for="(item,index) in funlist" :key="index" @click="handleNavcation(item.path)">
					<image :src="item.icon"></image>
					<view class="t4">{{ item.title }}</view>
				</view>
			</view>
			<view class="t2" style="margin-top: 20upx;">
				<view class="t3" v-for="(item,index) in funlist2" :key="index" @click="handleNavcation(item.path)">
					<image :src="item.icon"></image>
					<view class="t4">{{ item.title }}</view>
				</view>
			</view>
			<view class="t2" style="margin: 120upx auto;width: 70%;height: 350upx;">
				<view class="t3" style="color: #DADADA;font-size: 20upx;" v-for="(item,index) in buttomlist" :key="index">
					<image :src="item.icon" style="width: 60upx;height: 60upx;"></image>
					<view class="t4">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<!--    <uni-popup ref="popup" type="center">-->
		<!--      <view class="p1">-->
		<!--        <image src="https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/hb.png" style="height: 850upx;"></image>-->
		<!--        <text class="p2">6.00-->
		<!--          <text class="p3">元</text>-->
		<!--        </text>-->
		<!--        <image src="https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/banner_close.png" class="p4"-->
		<!--               @click="closeBanner"></image>-->
		<!--      </view>-->
		<!--    </uni-popup>-->
	</view>
</template>

<script>
	//tab组件
	// import zzxTabs from "@/components/zzx-tabs-index/zzx-tabs.vue"
	export default {
		components: {
			// zzxTabs
		},
		data() {
			return {
				//顶部导航栏配置
				logo: false,
				config: {
					back: false,
					leftSlot: true,
					centerSlot: true,
					color: ['#ffffff', '#FED635'],
					backgroundColor: [1, ['#FED635', '#FED635']],
					slideBackgroundColor: [0.9, ['#FFFFFF', '#FFFFFF']]
				},
				//tab组件配置
				items: ['帮我送', '帮我取'],
				current: 0,
				//底部导航1
				funlist: [{
						title: '帮买美食',
						// icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/ms_7.png',
						path: '../buy/buy'
					},
					{
						title: '帮买饮品',
						// icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/yl_3.png',
						path: '../buy/buy'
					},
					// {
					//   title: '挂号排队',
					//   icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/pd_1.png',
					//   path:'../lineup/lineup'
					// },
					// {
					//   title: '派发传单',
					//   icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/dd_2.png',
					//   path:'../helper/helper'
					// }
				],
				//底部导航2
				funlist2: [{
						title: '搬运货物',
						// icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/by_2.png',
						path: '../helper/helper'
					},
					{
						title: '测试待添加',
						// icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/db.png',
						path: '../helper/helper'
					},
					// {
					//   title: '异地代办',
					//   icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/db.png',
					//   path: '../helper/helper'
					// },
					// {
					//   title: '小时工',
					//   icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/sl_2.png',
					//   path: '../helper/helper'
					// },
					// {
					//   title: '帮忙遛宠物',
					//   icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/cw_2.png',
					//   path: '../helper/helper'
					// }
				],
				//底部标语
				buttomlist: [{
						title: '高效快捷',
						// icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/gx_3.png'
					},
					{
						title: '专业安全',
						// icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/aq.png'
					},
					{
						title: '钻石服务',
						// icon: 'https://flash-cloud.oss-cn-hangzhou.aliyuncs.com/zs_2.png'
					}
				],
				//位置信息
				location: '',
				//发货地址
				sendAddress: '从哪里取货？',
				//帮我取 取货地址
				takeAddress: '从哪里取货？'

			}
		},
		onPageScroll(e) {
			var that = this;
			that.$refs.hxnb.pageScroll(e);
			const st = parseFloat(e.scrollTop.toFixed(2));
			// 滑动距离
			let slideHeight = 100;
			if (st <= slideHeight) {
				this.logo = false;
			} else {
				this.logo = true;
			}

		},
		onLoad() {
			var that = this;
			//获取位置信息
			this.getLocation();
			//监听城市选择页
			uni.$on("selectCity", (selectCity) => {
				that.location = selectCity
			})
			//广告弹窗
			// this.$refs.popup.open();

		},
		onShow() {
			var that = this;
			uni.$on("addressReplenish", function(data) {
				that.sendAddress = data || '从哪里取货？';
			})
			uni.$on("takeAddressReplenish", function(data) {
				that.takeAddress = data || '从哪里取货？'
			})
		},
		methods: {
			/* 发货地址 常用 按钮*/
			handleSend() {
				uni.navigateTo({
					url: '../chooseAddress/send/send?pageType=1'
				})
			},
			/* tab切换 */
			handleTab(e) {
				var that = this;
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					if (this.current == 2) {
						//页面返回时重置tab
						that.current = 0
						uni.navigateTo({
							url: '../buy/buy'
						})

					}
				}
			},
			/* 获取定位 */
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						let that = this
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.request({
							header: {
								"Content-Type": "application/text"
							},
							url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
								res.longitude + ',' + res.latitude +
								'&key=82421d28c27c16f380dacf07af12481f&radius=1000&extensions=all',
							success(re) {
								if (re.statusCode === 200) {
									that.location = re.data.regeocode.addressComponent.city
								} else {
									that.location = '未开启定位'
								}
							}
						});
					}
				});
			},
			/* 选择城市 */
			chooseCity() {
				uni.navigateTo({
					url: '../city/city'
				})
			},
			/* 关闭红包弹窗 */
			closeBanner() {
				this.$refs.popup.close()
			},
			/* 帮我送-发货地址 */
			handleAddress() {
				console.log("发货地址跳转")
				uni.navigateTo({
					url: './near/address/address?method=0'
				})
			},
			/* 底部导航跳转 */
			handleNavcation(path) {
				uni.navigateTo({
					url: path
				})
			},
			/* 帮我送 - 收货地址 */
			handleAddressEnd() {
				var that = this;
				//验证发货地址是否填写
				if (that.sendAddress == '从哪里取货？') {
					uni.showToast({
						title: '请先完善取货地址',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '../address/address?method=1'
				})
			},
			/* 帮我送 - 收货常用按钮 */
			handleReceiving() {
				var that = this;
				//验证发货地址是否填写
				if (that.sendAddress == '从哪里取货？') {
					uni.showToast({
						title: '请先完善取货地址',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '../chooseAddress/receiving/receiving?pageType=1&&method=1'
				})
			},
			/* 帮我取 - 发货地址 */
			handleHelpTakeAddress() {
				uni.navigateTo({
					url: '../address/createTakeAddress/createTakeAddress?method=0'
				})
			},
			/* 帮我取 - 发货地址常用按钮 */
			handleHelpTake() {
				uni.navigateTo({
					url: '../address/chooseTakeAddress/chooseTakeAddress?pageType=1'
				})
			},
			/* 帮我取 - 收货地址 */
			handleHelpSendAddress() {
				var that = this;
				//验证发货地址是否填写
				if (that.takeAddress == '从哪里取货？') {
					uni.showToast({
						title: '请先完善取货地址',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '../address/createTakeAddress/createTakeAddress?method=1'
				})
			},
			/* 帮我取 - 收货地址常用按钮 */
			handleHelpSend() {
				var that = this;
				//验证发货地址是否填写
				if (that.takeAddress == '从哪里取货？') {
					uni.showToast({
						title: '请先完善取货地址',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '../address/chooseReceivingAddress/chooseReceivingAddress?pageType=1&&method=1'
				})
			}
		}
	}
</script>


<style>
	@font-face {
		font-family: 'iconfont';
		/* Project id 1708843 */
		src: url('https://at.alicdn.com/t/font_1708843_vtu6nsss6p.ttf?t=1631757791909') format('truetype');
	}

	page {
		background-color: #F8F8F8;
	}

	.i1 {
		width: 100%;
		height: 400upx;
	}

	.m1 {
		background: #FFFFFF;
		border-top-left-radius: 25upx;
		border-top-right-radius: 25upx;
		top: 505upx;
		position: absolute;
		height: 400upx;
		width: 100%;
		background-image: linear-gradient(#FFF3F2, #F9F8F5);
	}

	.m2 {
		display: flex;
		flex-direction: row;
		padding-left: 50upx;
		height: 80upx;
		line-height: 80upx;
		font-size: 22upx;
		/* background-color:#FFF3F2 ; */
		border-top-left-radius: 25upx;
		border-top-right-radius: 25upx;
		align-items: center;
		color: #999999;
	}

	.m2 image {
		width: 40upx;
		height: 40upx;
		border-radius: 100%;
		margin-right: 15upx;

	}

	.m3 {
		height: 300upx;
		box-shadow: 0 10upx 10upx 0 #C0C0C0;
		width: 94%;
		margin: 0 auto;
		border-radius: 20upx;
		background-color: #FFFFFF;
		padding-top: 10upx;
	}

	.m4 {
		display: flex;
		flex-direction: row;
		background-color: #F6F6F4;
		width: 90%;
		margin: 20upx auto 0 auto;
		height: 90upx;
		line-height: 90upx;
		align-items: center;
		padding-left: 10upx;
		color: #70706E;
		border-radius: 10upx;
	}

	.m5 {
		width: 100%;
	}

	.m4 image {
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}

	.m6 {
		display: flex;
		flex-direction: row;
		/* background-color: #F6F6F4; */
		width: 90%;
		margin: 0upx auto;
		height: 90upx;
		line-height: 90upx;
		align-items: center;
		padding-left: 10upx;
		color: #70706E;
		border-radius: 10upx;
	}

	.m6 image {
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}

	.m7 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding-right: 15upx;
	}

	.b1 {
		width: 80upx;
		height: 50upx;
		border-radius: 30upx;
		/* background-color: #FFFFFF; */
		line-height: 50upx;
		text-align: center;
		font-size: 22upx;
		color: #000000;
		border: 1upx solid #C0C0C0;
	}

	.t1 {
		padding-top: 380upx;
	}

	.t2 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

	}

	.t3 {
		display: flex;
		flex-direction: column;
		font-size: 24upx;
		color: #3F536E;
		width: 25%;
		height: 150upx;
		align-items: center;
	}

	.t3 image {
		width: 100upx;
		height: 100upx;
		margin-bottom: 5upx;
	}

	.t4 {
		/* margin-top: 10upx; */
	}

	.p1 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.p2 {
		font-size: 120upx;
		font-weight: 700;
		color: #C80105;
		position: absolute;
		top: 200upx;
	}

	.p3 {
		font-size: 40upx;
		color: #c80105;
	}

	.p4 {
		width: 50upx;
		height: 50upx;
	}
</style>